<template>
  <div>
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="完善资料"
      :ghost="false"
      @back="() => $router.go(-1)"
    ></a-page-header>
    <page-header-wrapper>
      <a-card :bordered="false">
        <div class="title">完善小程序资料</div>
        <div class="optionItem">
          <div class="info">
            <span class="name">小程序头像</span>
            <div class="pic" v-if="info.mini_url">
              <img :src="info.mini_url" alt="" />
            </div>
            <div class="ts">图片格式必须为：png,bmp,jpeg,jpg,gif；不可大于2M；建议使用png格式图片，以保持最佳效果；建议图片尺寸为144px*144px</div>
          </div>
          <div class="edit" @click="$refs.uploadImg.onClickUploadBtn()">修改</div>
        </div>
        <div class="optionItem">
          <div class="info">
            <span class="name">小程序名称</span>
            <div class="class">
              <span>{{ info.nickname }}</span>
              <!-- <a-tag v-if="info.apply_name_status == 0"> 未审核 </a-tag> -->
              <a-tag color="orange" v-if="info.apply_name_status == 1"> 审核中 </a-tag>
              <a-tag color="green" v-if="info.apply_name_status == 3"> 审核成功 </a-tag>
              <a-tag color="red" v-if="info.apply_name_status == 2"> 审核失败 </a-tag>
            </div>
            <span class="value" v-if="info.apply_name_status == 2">失败原因:{{ info.apply_name_error }}</span>
          </div>
          <div
            class="edit"
            @click="
              showEditName = true
              nameForm.nick_name = info.nickname
            "
          >
            修改
          </div>
        </div>
        <div class="optionItem">
          <div class="info">
            <span class="name">小程序类目</span>
            <div class="class" v-for="(item, index) in info.categories" :key="index">
              <span>{{ item.first_name }}{{ !item.second_name ? '' : ' => ' + item.second_name }}</span>
              <a-tag color="orange" v-if="item.audit_status == 1"> 审核中 </a-tag>
              <a-tag color="red" v-if="item.audit_status == 2"> 审核不通过 </a-tag>
              <a-tag color="green" v-if="item.audit_status == 3"> 审核通过 </a-tag>
            </div>
          </div>
          <div class="edit" @click="toShowClass">修改</div>
        </div>
        <div class="optionItem">
          <div class="info">
            <span class="name">小程序简介</span>
            <span class="value">{{ info.signature || '' }}</span>
          </div>
          <div
            class="edit"
            @click="
              showEditSignature = true
              signature = info.signature
            "
          >
            修改
          </div>
        </div>
      </a-card>
      <storage-select ref="uploadImg" selectNum="1" @onOk="selectPic" :hiddenInput="true"></storage-select>
      <!-- 修改简介弹窗 -->
      <a-modal v-model="showEditSignature" title="修改小程序简介" :afterClose="closeModal">
        <a-input v-model="signature"></a-input>
        <template slot="footer">
          <a-button key="back" @click="showEditSignature = false"> 取消 </a-button>
          <a-button key="submit" type="primary" :loading="loading" @click="editSignature"> 确定 </a-button>
        </template>
      </a-modal>
      <!-- 修改名字弹窗 -->
      <a-modal v-model="showEditName" title="修改小程序名称" :afterClose="closeModal">
        <a-form-model
          ref="ruleForm"
          :model="nameForm"
          :rules="rules"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 14 }"
          :destroyOnClose="true"
        >
          <a-form-model-item label="小程序名称" required prop="nick_name">
            <a-input-search placeholder="请输入小程序名称" v-model="nameForm.nick_name" @search="checkName">
              <a-button slot="enterButton" type="primary"> 检测名称 </a-button>
            </a-input-search>
          </a-form-model-item>
          <a-form-model-item label="营业执照" required prop="license">
            <cyyUploadImg
              @uploadSuccess="
                (e) => {
                  nameForm.license = e.data
                }
              "
              @deleteImg="nameForm.license = ''"
              :imgSrc="nameForm.license"
              imgSizeText="300*300"
            >
            </cyyUploadImg>
          </a-form-model-item>
          <a-form-model-item label="其他证明材料" prop="naming_other_stuff_1">
            <cyyUploadImg
              @uploadSuccess="
                (e) => {
                  nameForm.naming_other_stuff_1 = e.data
                }
              "
              @deleteImg="nameForm.naming_other_stuff_1 = ''"
              :imgSrc="nameForm.naming_other_stuff_1"
              imgSizeText="300*300"
            >
            </cyyUploadImg>
          </a-form-model-item>
          <a-form-model-item label="其他证明材料" prop="naming_other_stuff_2">
            <cyyUploadImg
              @uploadSuccess="
                (e) => {
                  nameForm.naming_other_stuff_2 = e.data
                }
              "
              @deleteImg="nameForm.naming_other_stuff_2 = ''"
              :imgSrc="nameForm.naming_other_stuff_2"
              imgSizeText="300*300"
            >
            </cyyUploadImg>
          </a-form-model-item>
          <a-form-model-item label="其他证明材料" prop="naming_other_stuff_3">
            <cyyUploadImg
              @uploadSuccess="
                (e) => {
                  nameForm.naming_other_stuff_3 = e.data
                }
              "
              @deleteImg="nameForm.naming_other_stuff_3 = ''"
              :imgSrc="nameForm.naming_other_stuff_3"
              imgSizeText="300*300"
            >
            </cyyUploadImg>
          </a-form-model-item>
          <a-form-model-item label="其他证明材料" prop="naming_other_stuff_4">
            <cyyUploadImg
              @uploadSuccess="
                (e) => {
                  nameForm.naming_other_stuff_4 = e.data
                }
              "
              @deleteImg="nameForm.naming_other_stuff_4 = ''"
              :imgSrc="nameForm.naming_other_stuff_4"
              imgSizeText="300*300"
            >
            </cyyUploadImg>
          </a-form-model-item>
          <a-form-model-item label="其他证明材料" prop="naming_other_stuff_5">
            <cyyUploadImg
              @uploadSuccess="
                (e) => {
                  nameForm.naming_other_stuff_5 = e.data
                }
              "
              @deleteImg="nameForm.naming_other_stuff_5 = ''"
              :imgSrc="nameForm.naming_other_stuff_5"
              imgSizeText="300*300"
            >
            </cyyUploadImg>
          </a-form-model-item>
        </a-form-model>
        <template slot="footer">
          <a-button key="back" @click="showEditName = false"> 取消 </a-button>
          <a-button key="submit" type="primary" :loading="loading" @click="editName"> 确定 </a-button>
        </template>
      </a-modal>
      <!-- 修改类目弹窗 -->
      <a-modal v-model="showEditClass" title="修改小程序类目" :afterClose="closeModal">
        <a-form-model-item label="小程序类目" required :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
          <a-cascader
            :field-names="{ label: 'name', value: 'id', children: 'children' }"
            :options="allClass"
            placeholder="请选择类目"
            v-model="choosedClass"
            :allowClear="false"
          />
        </a-form-model-item>
        <a-form-model-item label="已选类目" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
          <a-tag closable @close="(e) => cancleClass(e, item)" v-for="(item, index) in info.categories" :key="index">
            {{ item.first_name }}{{ !item.second_name ? '' : ' => ' + item.second_name }}
          </a-tag>
        </a-form-model-item>
        <a-form-model-item label="资质名称" required v-if="sensitive_type == 1">
          <a-input v-model="certicates.key"></a-input>
        </a-form-model-item>
        <a-form-model-item label="资质图片" required v-if="sensitive_type == 1">
          <cyyUploadImg
            @uploadSuccess="
              (e) => {
                certicates.value = e.data
              }
            "
            @deleteImg="certicates.value = ''"
            :imgSrc="certicates.value"
            imgSizeText="300*300"
          >
          </cyyUploadImg>
        </a-form-model-item>
        <template slot="footer">
          <a-button key="back" @click="showEditClass = false"> 取消 </a-button>
          <a-button key="submit" type="primary" :loading="loading" @click="editClass"> 确定 </a-button>
        </template>
      </a-modal>
    </page-header-wrapper>
  </div>
</template>

<script>
import { cyyUploadImg } from '@/components/CyyUi/index'
import {
  detail,
  editPic,
  editSignature,
  editName,
  allCalss,
  deleteClass,
  addClass,
  checkName,
} from '@/api/setting/applet'
export default {
  components: {
    cyyUploadImg,
  },
  data() {
    let checkPic = (rule, value, callback) => {
      if (!this.nameForm.license) {
        callback(new Error('请上传营业执照'))
      } else {
        callback()
      }
    }
    return {
      // 验证规则
      rules: {
        nick_name: [{ required: true, message: '请输入小程序名称', trigger: 'blur' }],
        license: [{ validator: checkPic, trigger: 'change' }],
      },
      // 小程序信息
      info: {},
      // 小程序id
      id: '',
      // 是否显示修改简介弹窗
      showEditSignature: false,
      // 小程序修改简介
      signature: '',
      // 显示修改名称
      showEditName: false,
      // 修改名字的表单
      nameForm: {
        nick_name: '',
        license: '',
        naming_other_stuff_1: '',
        naming_other_stuff_2: '',
        naming_other_stuff_3: '',
        naming_other_stuff_4: '',
        naming_other_stuff_5: ''
      },
      // 展示修改类目弹窗
      showEditClass: false,
      // 所有可选类目
      allClass: [],
      // 当前小程序已有类目
      currentClass: [],
      // 选中的类目
      choosedClass: [],
      // 选中类目的资质信息
      certicates: {
        key: '',
        value: '',
      },
      // 是否正在加载
      loading:false
    }
  },
  methods: {
    // 获取小程序信息
    async getAppletInfo() {
      const hide = this.$message.loading('加载中', 0)
      const res = await detail({ id: this.id })
      console.log(res)
      if (res.code == 0) {
        this.info = res.data
        Object.assign(this.nameForm, res.data.apply_mini_info);
      }
      hide()
      this.loading = false
    },
    // 选中图片
    async selectPic(e) {
      console.log(e)
      const res = await editPic({
        head_img_media_id: e,
        id: this.info.id,
        x1: 0,
        y1: 0,
        x2: 1,
        y2: 1,
      })
      if (res.code == 0) {
        this.getAppletInfo()
      }
    },
    // 点击修改简介
    async editSignature() {
      if (!this.signature) {
        return this.$message.warn('请填入小程序简介')
      }
      this.loading = true
      const res = await editSignature({
        signature: this.signature,
        id: this.id,
      })
      if (res.code == 0) {
        this.showEditSignature = false
        this.getAppletInfo()
      }
    },
    // 关系弹窗
    closeModal() {
      this.signature = ''
      this.nameForm.nick_name = ''
      this.nameForm.license = ''
      this.choosedClass = []
      this.certicates.key = ''
      this.certicates.value = ''
    },
    // 修改小程序名称
    editName() {
      this.$refs['ruleForm'].validate(async (valid) => {
        if (valid) {
          this.loading = true
          const res = await editName({
            ...this.nameForm,
            id: this.id,
          })
          if (res.code == 0) {
            this.showEditName = false
            this.getAppletInfo()
          }
        } else {
          return false
        }
      })
    },
    // 修改类目的前置
    async toShowClass() {
      this.showEditClass = true
    },
    // 获取所有可选类目
    async getAllClass() {
      const res = await allCalss({ id: this.id })
      if (res.code == 0) {
        this.allClass = res.data[0].children
      }
    },
    // 点击删除单个类目
    async cancleClass(e, item) {
      console.log(e, item)
      e.preventDefault()
      const res = await deleteClass({
        cate_first: item.first,
        cate_second: item.second,
        id: this.id,
      })
      console.log(res)
      if (res.code == 0) {
        this.$message.success('删除成功')
        this.showEditClass = false
        this.getAppletInfo()
      }
    },
    // 点击增加类目
    async editClass() {
      console.log(this.choosedClass)
      if (this.info.categories.length && this.info.categories.length >= 5) {
        return this.$message.warn('最多只可添加5个类目')
      }
      if (!this.choosedClass.length) {
        return this.$message.warn('请选择需要添加的类目')
      }
      this.loading = true
      let params = {
        first: this.choosedClass[0],
        second: this.choosedClass[1],
      }
      if (this.sensitive_type == 1) {
        if (!this.certicates.key) {
          return this.$message.warn('请输入资质名称')
        }
        if (!this.certicates.value) {
          return this.$message.warn('请上传资质图片')
        }
        params.certicates = this.certicates
      }
      const res = await addClass({ categories: [params], id: this.id })
      if (res.code == 0) {
        this.showEditClass = false
        this.getAppletInfo()
      }
    },
    // 检测小程序名称
    async checkName() {
      if (!this.nameForm.nick_name) {
        return
      }
      const res = await checkName({
        nick_name: this.nameForm.nick_name,
        id: this.id,
      })
      console.log(res)
      if (res.code == 0) {
        this.$message.success(res.msg)
      }
    },
  },
  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id
      this.getAppletInfo()
      this.getAllClass()
    }
  },
  computed: {
    sensitive_type() {
      if (this.choosedClass.length) {
        try {
          let first = this.choosedClass[0]
          let second = this.choosedClass[1]
          let index1 = this.allClass.findIndex((item) => {
            return item.id == first
          })
          let firstClass = this.allClass[index1]
          if (firstClass && firstClass.children) {
            let index2 = firstClass.children.findIndex((item) => {
              return item.id == second
            })
            let secondClass = firstClass.children[index2]
            return secondClass.sensitive_type
          }
        } catch (error) {
          return 0
        }
      } else {
        return 0
      }
    },
  },
}
</script>

<style lang="less" scoped>
.title {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 14px;
}
.tip {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
  line-height: normal;
}
.optionItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f0;
  padding: 14px 0;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
  .info {
    display: flex;
    flex-direction: column;
    width: 700px;
    .name {
      color: rgba(0, 0, 0, 0.85);
      font-weight: 600;
    }
    .value {
      margin-top: 6px;
    }
    .pic {
      width: 104px;
      height: 104px;
      border-radius: 4px;
      border: 1px solid rgba(0, 0, 0, 0.15);
      margin-top: 6px;
      padding: 8px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .class {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 6px;
    }
  }
  .edit {
    color: #1890ff;
    cursor: pointer;
  }
}
</style>